<template>
  <div class="process-container">
    <div class="content-wrapper a4-page">
      <div class="header-section">
        <router-link class="back-btn" to="/main">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2>流程管理</h2>
        <div class="search-section">
          <el-input
            v-model="searchQuery"
            placeholder="搜索流程"
            prefix-icon="el-icon-search"
            clearable
            @input="handleSearch"
            style="width: 200px;">
          </el-input>
        </div>
      </div>
      
      <!-- 流程入口卡片 -->
      <div class="process-entries">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in paginatedProcesses" :key="item.id">
            <el-card class="process-card" shadow="hover" @click.native="handleProcessClick(item)">
              <div class="process-icon">
                <i :class="item.icon"></i>
              </div>
              <div class="process-info">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
       
        <!-- 分页器 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 12, 16, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredProcesses.length">
          </el-pagination>
        </div>
      </div>

      <!-- 添加流程列表部分 -->
      <div class="process-list-section">
        <div class="list-header">
          <h3>流程列表</h3>
          <div class="header-actions">
            <el-input
              v-model="searchQuery"
              placeholder="搜索流程"
              prefix-icon="el-icon-search"
              clearable
              @clear="handleSearch"
              @input="handleSearch"
              style="width: 200px;"
            />
            <el-select
              v-model="statusFilter"
              placeholder="状态筛选"
              clearable
              @change="handleSearch"
              style="width: 120px; margin-left: 10px;"
            >
              <el-option label="全部" value="" />
              <el-option label="进行中" value="processing" />
              <el-option label="已完成" value="completed" />
              <el-option label="已终止" value="terminated" />
            </el-select>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="handleSearch"
              style="width: 260px; margin-left: 10px;"
            />
          </div>
        </div>

        <el-table
          :data="processList"
          border
          stripe
          style="width: 100%; margin-top: 20px;"
          v-loading="loading"
        >
          <el-table-column prop="instanceCode" label="流程编号" width="180" />
          <el-table-column prop="processName" label="流程名称" width="180" />
          <el-table-column prop="currentNodeName" label="当前节点" width="150" />
          <el-table-column prop="createBy" label="发起人" width="120">
            <template slot-scope="scope">
              {{ getUserName(scope.row.createBy) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发起时间" width="180">
            <template slot-scope="scope">
              {{ formatDate(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="viewProcess(scope.row)"
              >查看</el-button>
              <el-button
                v-if="scope.row.status === 'processing'"
                type="text"
                size="small"
                @click="continueProcess(scope.row)"
              >继续处理</el-button>
              <el-button
                v-if="scope.row.status === 'processing'"
                type="text"
                size="small"
                class="danger-text"
                @click="terminateProcess(scope.row)"
              >终止</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </div>

      <div class="process-layout">
        <div class="menu-section">
          <el-menu
            :default-active="activeMenu"
            class="process-menu"
            router>
            <el-menu-item :index="'/main/process/approval'">
              <i class="el-icon-s-check"></i>
              <span>待我审批</span>
            </el-menu-item>
            <el-menu-item :index="'/main/process/my'">
              <i class="el-icon-document"></i>
              <span>我的申请</span>
            </el-menu-item>
            <el-menu-item :index="'/main/process/leave'">
              <i class="el-icon-date"></i>
              <span>请假流程管理</span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="content-section">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索相关
      searchQuery: '',
      statusFilter: '',
      dateRange: [],

      // 表格相关
      processList: [],
      loading: false,

      // 分页相关
      currentPage: 1,
      pageSize: 12,
      total: 0,

      // 流程数据
      processes: [
        {
          id: 1,
          title: '请假申请流程',
          description: '发起请假申请流程',
          icon: 'el-icon-date',
          route: '/main/renshi/kaoqing/qingjia/qingjia'
        },
        {
          id: 2,
          title: '绩效管理流程',
          description: '发起绩效考核流程',
          icon: 'el-icon-data-line',
          route: '/main/renshi/performance/process'
        },
        {
          id: 3,
          title: '加班申请流程',
          description: '发起加班申请流程',
          icon: 'el-icon-time',
          route: '/main/renshi/kaoqing/jiabansq/jiabansq'
        },
        {
          id: 4,
          title: '出差申请流程',
          description: '发起出差申请流程',
          icon: 'el-icon-location',
          route: '/main/renshi/kaoqing/gwwaichu/gwwaichu'
        },
        {
          id: 5,
          title: '招聘申请流程',
          description: '发起人员增补申请流程',
          icon: 'el-icon-user-solid',
          route: '/main/renshi/zhaoping/process'
        },
        {
          id: 6,
          title: '培训管理流程',
          description: '发起培训申请流程',
          icon: 'el-icon-reading',
          route: '/main/renshi/peixun/process'
        },
        {
          id: 7,
          title: '接待流程',
          description: '发起接待申请流程',
          icon: 'el-icon-service',
          route: '/main/xingzheng/jiedai/process'
        },
        {
          id: 8,
          title: '物业管理流程',
          description: '发起物业报修流程',
          icon: 'el-icon-office-building',
          route: '/main/wuye/process'
        },
        {
          id: 9,
          title: '设施设备管理流程',
          description: '发起设备维护流程',
          icon: 'el-icon-setting',
          route: '/main/wuye/facility/process'
        },
        {
          id: 10,
          title: '车辆管理流程',
          description: '发起车辆使用流程',
          icon: 'el-icon-truck',
          route: '/main/wuye/vehicle/process'
        },
        {
          id: 11,
          title: '宿舍管理流程',
          description: '发起宿舍管理相关流程',
          icon: 'el-icon-house',
          route: '/main/wuye/dormitory/process'
        },
        {
          id: 12,
          title: '考勤管理流程',
          description: '发起考勤管理相关流程',
          icon: 'el-icon-time',
          route: '/main/renshi/kaoqing/process'
        },
        {
          id: 13,
          title: '人力资源管理流程',
          description: '发起人力资源相关流程',
          icon: 'el-icon-user',
          route: '/main/renshi/hr/process'
        },
        {
          id: 14,
          title: '文件管理流程',
          description: '发起文件管理相关流程',
          icon: 'el-icon-document',
          route: '/main/xingzheng/file/process'
        },
        {
          id: 15,
          title: '奖惩管理流程',
          description: '发起奖惩管理相关流程',
          icon: 'el-icon-medal',
          route: '/main/renshi/reward/process'
        },
        {
          id: 16,
          title: '公共设施管理流程',
          description: '发起公共设施管理相关流程',
          icon: 'el-icon-office-building',
          route: '/main/wuye/public-facility/process'
        },
        {
          id: 17,
          title: '企业文化管理流程',
          description: '发起企业文化管理相关流程',
          icon: 'el-icon-collection',
          route: '/main/xingzheng/culture/process'
        },
        {
          id: 18,
          title: '行政物品采购流程',
          description: '发起物品采购与发放管理流程',
          icon: 'el-icon-shopping-cart-2',
          route: '/main/xingzheng/purchase/process'
        },
        {
          id: 19,
          title: '网络发展规划流程',
          description: '发起网络发展规划流程',
          icon: 'el-icon-connection',
          route: '/main/development/network/process'
        },
        {
          id: 20,
          title: '社会保险办理流程',
          description: '发起社会保险办理流程',
          icon: 'el-icon-umbrella',
          route: '/main/renshi/insurance/process'
        },
        {
          id: 21,
          title: '薪资核算流程',
          description: '发起薪资核算与发放流程',
          icon: 'el-icon-money',
          route: '/main/renshi/salary/process'
        },
        {
          id: 22,
          title: '职位异动管理流程',
          description: '发起职位异动管理流程',
          icon: 'el-icon-user',
          route: '/main/renshi/position/process'
        },
        {
          id: 23,
          title: '宣传标识制作流程',
          description: '发起宣传标识牌横幅制作流程',
          icon: 'el-icon-picture',
          route: '/main/xingzheng/banner/process'
        },
        {
          id: 24,
          title: '研发管理流程',
          description: '发起研发项目管理流程',
          icon: 'el-icon-cpu',
          route: '/main/development/process'
        },
        {
          id: 25,
          title: '系统设计管理流程',
          description: '发起系统设计管理流程',
          icon: 'el-icon-edit-outline',
          route: '/main/development/design'
        },
        {
          id: 26,
          title: '系统开发管理流程',
          description: '发起系统开发管理流程',
          icon: 'el-icon-s-operation',
          route: '/main/development/coding'
        },
        {
          id: 27,
          title: '电脑报废管理流程',
          description: '发起电脑报废申请流程',
          icon: 'el-icon-delete',
          route: '/main/xingzheng/computer/scrap/process'
        },
        {
          id: 28,
          title: '固定资产盘点作业流程',
          description: '发起固定资产盘点作业流程',
          icon: 'el-icon-document-checked',
          route: '/main/xingzheng/asset/inventory/process'
        },
        {
          id: 29,
          title: '行政事务管理流程',
          description: '发起行政事务管理流程',
          icon: 'el-icon-s-management',
          route: '/main/xingzheng/affairs/process'
        },
        {
          id: 30,
          title: '环境与卫生管理',
          description: '包括清洁申请、消杀申请、绿化养护等',
          icon: 'el-icon-brush',
          route: '/main/huanjing/process'
        }
      ]
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
    filteredProcesses() {
      if (!this.searchQuery) {
        return this.processes
      }
      const query = this.searchQuery.toLowerCase()
      return this.processes.filter(process => 
        process.title.toLowerCase().includes(query) ||
        process.description.toLowerCase().includes(query)
      )
    },
    paginatedProcesses() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredProcesses.slice(start, end)
    }
  },
  methods: {
    // 获取流程列表
    async fetchProcessList() {
      // this.loading = true
      // try {
      //   const params = {
      //     page: this.currentPage,
      //     size: this.pageSize,
      //     keyword: this.searchQuery,
      //     status: this.statusFilter,
      //     startDate: this.dateRange?.[0],
      //     endDate: this.dateRange?.[1]
      //   }
      //   const res = await this.$http.get('/api/process/instances', { params })
      //   this.processList = res.data.records
      //   this.total = res.data.total
      // } catch (error) {
      //   this.$message.error('获取流程列表失败')
      // } finally {
      //   this.loading = false
      // }
    },

    // 搜索处理
    handleSearch() {
      this.currentPage = 1
      this.fetchProcessList()
    },

    // 分页处理
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.fetchProcessList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchProcessList()
    },

    // 状态处理
    getStatusType(status) {
      const statusMap = {
        processing: 'primary',
        completed: 'success',
        terminated: 'danger'
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusMap = {
        processing: '进行中',
        completed: '已完成',
        terminated: '已终止'
      }
      return statusMap[status] || status
    },

    // 操作处理
    viewProcess(row) {
      this.$router.push(`/main/process/detail/${row.id}`)
    },
    continueProcess(row) {
      // 根据流程类型跳转到对应的处理页面
      const routeMap = {
        insurance: '/main/renshi/insurance/process',
        purchase: '/main/xingzheng/purchase/process',
        // ... 其他流程路由映射
      }
      const route = routeMap[row.processType]
      if (route) {
        this.$router.push({
          path: route,
          query: { instanceId: row.id }
        })
      }
    },
    async terminateProcess(row) {
      try {
        await this.$confirm('确认终止该流程？', '提示', {
          type: 'warning'
        })
        await this.$http.post(`/api/process/instance/${row.id}/terminate`)
        this.$message.success('流程已终止')
        this.fetchProcessList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('终止流程失败')
        }
      }
    },

    // 工具方法
    formatDate(date) {
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getUserName(userId) {
      // 这里可以接入用户服务获取用户名
      return userId
    },
    handleProcessClick(process) {
      this.$router.push(process.route)
    },
  },
  created() {
    this.fetchProcessList()
  }
}
</script>

<style lang="scss" scoped>
.process-container {
  padding: 20px;
  min-height: 100vh;
  background-color: white;

  .content-wrapper {
    &.a4-page {
      width: 297mm;  /* 4A 纸宽度 */
      min-height: 210mm; /* 4A 纸高度 */
      margin: 0 auto;
      padding: 20mm; /* 4A 纸边距 */
      background: antiquewhite;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      
      @media print {
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 20mm;
        box-shadow: none;
      }
    }
  }

  .header-section {
    margin-bottom: 20px;

    h2 {
      color: #303133;
      margin: 0;
      font-size: 24px;
    }

    .search-section {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .process-entries {
    margin-bottom: 20px;

    .el-row {
      margin: -8px;
      
      .el-col {
        padding: 8px;
      }
    }

    .process-card {
      padding: 15px;
      height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .process-icon {
        text-align: center;
        margin-bottom: 12px;

        i {
          font-size: 32px;
          color: #409EFF;
          
          &:hover {
            color: #66b1ff;
          }
        }
      }

      .process-info {
        text-align: center;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        h3 {
          margin: 0 0 8px;
          font-size: 16px;
          color: #303133;
          line-height: 1.4;
          font-weight: 500;
        }
        
        p {
          margin: 0;
          font-size: 13px;
          color: #909399;
          line-height: 1.4;
          
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .process-layout {
    display: flex;
    margin-top: 20px;
  }

  .menu-section {
    flex: 0 0 200px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .content-section {
    flex: 1;
    margin-left: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 500px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .process-menu {
    border-right: none;
  }

  .process-list-section {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }

      .header-actions {
        display: flex;
        align-items: center;
      }
    }
  }

  .pagination-container {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }

  .danger-text {
    color: #F56C6C;
    
    &:hover {
      color: #f78989;
    }
  }
}

/* 打印样式 */
@media print {
  .process-container {
    padding: 0;
    background: white;
    
    .content-wrapper {
      box-shadow: none;
    }
    
    .process-card {
      break-inside: avoid;
    }
  }
}
</style> 